.groupFilterContainer {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  .searchBar {
    margin: 10px 16px;
    border-radius: 18px;
    background-color: rgba(0, 0, 0, 0.04);
    height: 36px;
    overflow: hidden;
    line-height: 36px;
    padding-left: 12px;
    .icon-search {
      line-height: 36px;
      color: #9e9e9e;
    }
    .ming.Input {
      background-color: transparent;
      border: none;
    }
  }
  .mobileSearchNoData {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #9e9e9e;
    font-size: 18px;
    .iconBox {
      width: 90px;
      height: 90px;
      border-radius: 45px;
      background: rgba(0, 0, 0, 0.04);
      text-align: center;
      margin-bottom: 22px;
      .searchIcon {
        line-height: 90px;
      }
    }
  }
  .breadNavbar {
    padding: 0px 0 12px 16px;
    .ant-breadcrumb {
      font-size: 14px;
      color: #2196f3;
      > span:last-child {
        color: #333;
      }
      .breadIcon {
        color: #c7c7cc;
        margin: 0 8px;
      }
    }
  }
  .nano {
    .width4 {
      width: 4px;
    }
    .listBox {
      .borderStyle {
        width: 4px;
        height: 32px;
        margin-top: 6px;
        border-radius: 0px 6px 6px 0px;
      }
      background-color: #fff;
      .groupItem {
        padding: 10px 0;
        font-weight: 500;
        .count {
          color: #9e9e9e;
          padding-right: 16px;
        }
        .line {
          width: 0;
          border: 1px solid #eaeaea;
        }
        .rightArrow {
          width: 40px;
          color: #c7c7cc;
          text-align: center;
        }
      }
      .listItem {
        background-color: #fff;
        justify-content: space-between;
        padding: 10px 16px 10px 0;
        box-sizing: border-box;
        font-size: 14px;
        .radioGroupFilterTxt {
          border-radius: 12px;
          font-size: 13px;
          box-sizing: border-box;
        }
        .count {
          color: #9e9e9e;
        }
      }
      .borderBottom {
        border-bottom: 1px solid #f2f2f2;
      }
    }
    .searchRecordResult {
      background-color: #fff;
      padding-left: 16px;
      .recordItem {
        border-bottom: 1px solid #f2f2f2;
        padding: 10px 0;
      }
    }
  }
  .groupFilterDrawer {
    -webkit-overflow-scrolling: touch;
    position: inherit;
    > .am-drawer-sidebar {
      width: 100%;
      z-index: 100;
      background-color: #fff;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
    }
    .am-drawer-overlay,
    .am-drawer-content {
      position: inherit;
    }
    &.am-drawer-open {
      z-index: 100;
      position: fixed;
    }
  }
  .groupDetailBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .groupTitle {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 600;
      padding-left: 12px;
    }
    .groupDetailCon {
      flex: 1;
      background-color: #f2f2f2;
    }
  }
}
